<template>
  <div class="page-data-auth-container">
    <el-row :gutter="20">
      <el-form ref="requestParam"
               :model="requestParam"
               label-width="80px">
        <el-col :span="24">
          <el-table :data="tableData"
                    height="600"
                    :header-cell-style="{ background: '#f5f5f5' }">
            <el-table-column type="index"
                             fixed
                             align="center"
                             label="序号">
            </el-table-column>
            <el-table-column prop="company_name"
                             align="center"
                             show-overflow-tooltip
                             label="单位名称">
            </el-table-column>
            <el-table-column prop="company_address"
                             align="center"
                             show-overflow-tooltip
                             label="单位地址">
            </el-table-column>
            <el-table-column prop="project_name"
                             align="center"
                             show-overflow-tooltip
                             label="关联项目名称">
            </el-table-column>
            <el-table-column width="150px"
                             show-overflow-tooltip
                             align="center"
                             prop="prp_created_at"
                             label="项目关联时间">
            </el-table-column>
            <el-table-column label="操作"
                             align="center"
                             fixed="right"
                             width="120px">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="onPageDataAuth(scope.row)">页面数据授权</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination @size-change="
                handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="requestParam.page"
                         :page-sizes="[10,20,30,40,50,100]"
                         class="pagination-style"
                         :page-size="requestParam.page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
      <PageDataAuthDialog v-if="pageDataAuthVisible==true"
                          :objRow.sync="objRow"
                          :pageDataAuthVisible.sync="pageDataAuthVisible"></PageDataAuthDialog>
    </el-row>
  </div>
</template>

<script>
import { ProjectListApi } from "@/services/ProjectCenter";
import PageDataAuthDialog from './components/PageDataAuthDialog';
export default {
  components: {
    PageDataAuthDialog//页面数据授权
  },
  data () {
    return {
      objRow: {},
      pageDataAuthVisible: false,
      total: 0,
      tableData: [],
      requestParam: {
        page: 1,
        page_size: 10,
        is_page: 1,
        project_id: '',
      }
    }
  },
  methods: {
    getAssoProRelProList () {//页面数据授权
      ProjectListApi.getAssoProRelProList({
        params: this.requestParam
      }).then((res) => {
        if (res.data) {
          let list = res.data.list;
          let total = res.data.total_count;
          this.tableData = list;
          this.total = total;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    handleCurrentChange (val) {
      this.requestParam.page = val;
      this.getAssoProRelProList();//页面数据授权数据
    },
    handleSizeChange (val) {
      this.requestParam.page_size = val;
      this.handleCurrentChange(1);
    },
    onPageDataAuth (row) {//页面数据授权
      this.objRow = Object.assign({}, row)
      this.pageDataAuthVisible = true;
    },
    getProIds (proList) {
      let proId = '';
      let newArr = []
      if (proList.length > 0) {
        proList.map((item) => {
          newArr.push(item.project_id)
        });
        proId = newArr.join(',');//逗号分隔的项目id
      };
      return proId;
    }
  },
  watch: {
    '$store.state.choosedProjectList': {
      handler (newval) {
        let proList = newval.list;//飞轮选中的项目        
        this.requestParam.project_id = this.getProIds(proList);//项目的主键值更新
        this.handleCurrentChange(1);//刷新
        console.log('2项目名称choosedProjectList=', newval.list)
      },
      deep: true
    },

    // '$store.state.choosedProject': function (val) {
    //   // this.choosedProject = val
    //   // this.project_id = val.project_id
    //   console.log('1项目999999999val=', val)
    // }
  },
  created () {
    let proList = this.$store.state.choosedProjectList;
    this.requestParam.project_id = this.getProIds(proList.list);//项目的主键值
    if (this.requestParam.project_id) {
      this.handleCurrentChange(1);//刷新
    }

  }
}
</script>

<style lang="scss" scoped>
.page-data-auth-container {
  padding: 20px;
}
</style>